<template>
    <div class="app-container">
      <el-form :model="queryParams"  size="small" :inline="true" v-show="showSearch">
        <el-form-item label="文件名称">
          <el-input
            v-model="queryParams.fileName"
            placeholder="请输入文件名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
          <el-form-item label="法律法规分类">
            <el-select
              v-model="queryParams.dictionariesId"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dictionaires"
                :key="dict.id"
                :label="dict.classification"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="强制程度">
            <el-select
              v-model="queryParams.forceDegree"
              clearable
              style="width: 240px"
            >
                <el-option label="强制性" value="强制性"></el-option>
                <el-option label="推荐性" value="推荐性"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select v-model="queryParams.approvalStatus" >
                <el-option label="启用" value="0"></el-option>
                <el-option label="禁用" value="1"></el-option>
              </el-select>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:flfgManage:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:flfgManage:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            v-hasPermi="['system:flfgManage:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:flfgManage:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="flfgManageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="所属部门" prop="dept.deptName" width="120" />
        <el-table-column label="法律法规规定" prop="dic.classification"  width="150" />
        <el-table-column label="文件名称" prop="fileName" width="150" />
        <el-table-column label="强制程度" prop="forceDegree" width="100" />
        <el-table-column label="发证机构" prop="releaseMechanism" width="100" />
        <el-table-column label="发证日期" prop="releaseTime" width="200" />
        <el-table-column label="编辑时间" prop="updateTime" width="200" />

        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="scope.row.id !== 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:flfgManage:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:flfgManage:remove']"
            >删除</el-button>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">


            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改法律法规管理配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="法规编号" prop="number">
            <el-input :disabled="true" v-model="form1.dictionaires.number" />
          </el-form-item>

          <el-form-item label="法律法规分类" prop="classification">
            <el-select
              @change="addNumber"
              v-model="form1.dictionaires.classification"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dictionaires"
                :key="dict.id"
                :label="dict.classification"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="文件名称" prop="fileName">
            <el-input
              type="textarea"
              autosize
              v-model="form.fileName"
              placeholder="请输入文件名称"
              />
          </el-form-item>
          <el-form-item label="强制程度" prop="forceDegree">
            <el-select v-model="form.forceDegree">
              <el-option label="强制性" value="强制性"></el-option>
              <el-option label="推荐性" value="推荐性"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布机构">
            <el-input v-model="form.releaseMechanism"/>
          </el-form-item>
          <el-form-item label="发布日期" prop="releaseTime">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.releaseTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="启用日期" prop="enableTime">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.enableTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="废止日期">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.abolishTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="摘要" prop="summary">
            <el-input v-model="form.summary"
            placeholder="请输入摘要"
            />
          </el-form-item>
          <el-form-item label="是否现行" prop="isActive">
            <el-radio-group v-model="form.isActive">
              <el-radio  :label="1">是</el-radio>
              <el-radio  :label="0">否</el-radio>
            </el-radio-group>

          </el-form-item>
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              :action= "uploadUrl"
              :headers= "headers"
              :on-success = "uploadSuccess"
             >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="复查时间">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.reviewTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="辨识人" prop="userName">
            <el-col :span="3">
              <el-input :disabled="true" v-model="form1.user.userName"></el-input>
            </el-col>
            <el-button
              type="primary"
              plain
              size="mini"
              @click="addUserName"

            >
              选择人员
            </el-button>
          </el-form-item>
          <el-form-item label="辨识时间">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.distinguishDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="来源">
            <el-input v-model="form.source"></el-input>
          </el-form-item>
          <el-form-item label="适用部门" prop="deptName">
            <el-input v-model="form1.dept.deptName" :disabled="true" placeholder="点击右侧图标选择责任部门">
              <el-button slot="append" @click="addDeptName" icon="el-icon-search" title="选择数据"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="状态" prop="approvalStatus">
            <el-radio-group v-model="form.approvalStatus">
              <el-radio  :label="0">正常</el-radio>
              <el-radio  :label="1">停用</el-radio>
            </el-radio-group>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 选择人员弹窗 -->
      <el-dialog
        title="选择部门"
        :visible.sync="userOpen"
        width="900px"
        >
        <el-table v-loading="loading" :data="userList"  @selection-change="userSelectChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId"  />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"  :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
          <el-table-column label="状态" align="center" key="status" >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

        </el-table>

      </el-dialog>
      <!--选择部门-->
      <el-dialog
        title="提示"
        :visible.sync="deptOpen"
        width="500px"

        >
        <el-col :span="4" :xs="24">
                    <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
              style="width: 500px;margin-left: -20px;padding-left: 20px;height: 300px;"
            />
          </div>
        </el-col>

      </el-dialog>

    </div>
  </template>

  <script>
  import {deptTreeSelect,listUser,listDept,flfgManageList,flfgManageById,flfgManageSave,flfgManageRemove,userList,deptList,flfgDictionariesList,flfgDictionariesInfo,flfgDictionariesSave,flfgDictionariesRemove} from "@/api/aqsc/flfg/index"
  import { getToken } from '@/utils/auth'
  export default {
    name: "Role",
    dicts: ['sys_normal_disable'],
    data() {
      return {
        dictionaires:{},
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        //部门树
        deptOptions:undefined,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 用户列表弹出层
        userOpen:false,
        // 部门树弹出层
        deptOpen:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //用户数据
        userList:[],
        //选中的用户数据
        user:{},
        //文件上传属性
        uploadOptions:{
          isUploading:false,


          uploadList:[]
        },
        headers:{},
        uploadUrl:'/dev-api/file/upload',
        //用户查询数据
        userQueryFrom:{},
        // 角色表格数据
        flfgManageList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
          // 日期范围
        dateRange: [],
        // 数据范围选项
                // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,

          status: undefined
        },
        // 表单参数
        form1:{
          dictionaires:{
            classification: undefined,
            number: ''
          },
          user:{
            userName:undefined
          },
          dept:{
            deptName:undefined
          },
          forceDegree:'强制性'
        },
        form: {
          dictionariesId:undefined,
          deptId:undefined,
          userId:undefined,
          enclosure:undefined,
          approvalStatus:0
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单校验
        rules: {
          fileName:[
            {required:true,message:'文件名称不能为空',trigger:'blur'}
          ],
          releaseTime:[
            {required:true,message:'发布日期不能为空',trigger:'blur'}

          ],

          enableTime:[
            {required:true,message:'启用日期不能为空',trigger:'blur'}

          ],
          summary:[
            {required:true,message:'摘要不能为空',trigger:'blur'}

          ],
          isActive:[
            {required:true,message:'请选择是否现行',trigger:'blur'}

          ],
          approvalStatus:[
            {required:true,message:'请选择审批状态',trigger:'blur'}

          ],
          userName:[
            {required:true,message:'请选择辨识人',trigger:'change'}

          ],
          deptName:[
            {required:true,message:'请选择归属部门',trigger:'change'}

          ],
        }
      };
    },
    created() {
      this.getList()
      this.getDictionairesList()
      this.headers =  {"Authorization":"Bearer "+getToken()}
    },
    methods: {

      uploadSuccess(response,file,fileList){
        this.form.enclosure = response.data.url

      },

      addNumber(parms){

        for(let i=0;i<this.dictionaires.length;i++){

            if(this.dictionaires[i].id == this.form1.dictionaires.classification){
              this.form1.dictionaires.number = this.dictionaires[i].number
              this.form.dictionariesId = this.dictionaires[i].id
            }

        }


      },
      addUserName(){
          listUser(this.userQueryFrom).then(response=>{
            this.userOpen = true
            this.userList = response.rows

          })

        },
      userSelectChange(selection){
        this.form.userId = selection[0].userId
        this.user = selection.map(item => item.userName)
        this.form1.user.userName = this.user

        this.userOpen = false

      },
      addDeptName(){

        this.getDeptTree()
        this.deptOpen = true
      },
      getDeptTree(){
        deptTreeSelect().then(response=>{

          this.deptOptions =  response.data
        })
      },
      handleNodeClick(data){
        this.form1.dept.deptName = data.label
        this.form.deptId=data.id
        this.deptOpen = false
      },
      //法律法规字典列表
      getDictionairesList(){
        flfgDictionariesList().then(response=>{
          this.dictionaires = response.rows
        })
      },
      /** 查询法律法规列表 */
      getList() {
        this.loading = true;
        flfgManageList(this.queryParams).then(response=>{
          this.flfgManageList = response.rows
          this.total = response.total
          this.loading =false
        });
      },
      filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
     },
      // 取消按钮
      userCancel(){
        this.userOpen = false;
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮（数据权限）
      cancelDataScope() {
        this.openDataScope = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          dictionariesId:undefined,
          dictionaires:{

            classification: undefined,
            number: ''
          },
          user:{
            userName:undefined
          },
          dept:{
            deptName:undefined
          },
          deptId:undefined,
          userId:undefined,
          enclosure:undefined,
          status:0
        }
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        for(var i=0;i<=selection.length;i++){
          this.ids.push(selection[i].id)
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        flfgDictionariesList().then(response=>{
          this.open = true;
           this.title = "添加法律法规信息";
        })


      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        flfgManageById(row.id).then(resp=>{

           this.form =  resp.data
           this.open = true
           this.title = "修改法律法规信息";

        })

      },
      /** 提交按钮 */
      submitForm: function() {

        this.$refs["form"].validate(valid => {
          if(valid){
            flfgManageSave(this.form).then(response=>{
            this.$modal.msgSuccess("操作成功");
            this.getList()
            this.open=false
           })
          }

        });
      },
      /** 提交按钮（数据权限） */
      submitDataScope: function() {
        if (this.form.roleId != undefined) {
          this.form.deptIds = this.getDeptAllCheckedKeys();
          dataScope(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openDataScope = false;
            this.getList();
          });
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {

        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',

        }).then(() => {

          this.ids.push(row.id)
          flfgManageRemove(this.ids).then(resp=>{
          this.ids =[]
          this.getList();
          this.$modal.msgSuccess("删除成功");
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });





      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/role/export', {
          ...this.queryParams
        }, `role_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
